<template>
  <div class="container scroll-page">
    <div class="swipe-wrap">
      <mt-swipe :auto="0">
        <mt-swipe-item v-for="(item, index) in details.avatar" :key="index" :style="{backgroundImage:`url(${item})`}" class="detail-swipe-item"></mt-swipe-item>
      </mt-swipe>
      <div class="num-tag bottom-tag">
        <i class="iconfont icon-people"></i>
        <span class="tag-txt">{{details.pre_book_count}}/{{details.pre_size}}</span>
      </div>
    </div>
    <div class="content-wrap">
      <div class="club-info">
        <p class="title-txt">{{details.name}}</p>
        <p class="sm-txt pad-txt">地址：{{details.location}}</p>
        <p class="sm-txt">电话：{{details.phone}}</p>
        <p class="sec-title">门店详情</p>
        <div class="light-txt">
          常言：什么时候开始练习瑜伽，你的年龄就停止在这个时候。要有个自己的瑜伽馆，把时光都寄隐起来，今后在每个阳光灿烂的日子想起，都是满满的美好……
        </div>
        <div class="light-txt" v-html="details.pre_content" v-if="expand" @click="expandInfo"></div>
        <div class="arrow-wrap" @click="expandInfo"><i class="iconfont icon-arrow" :class="[expand ? 'arrow-up' : '']"></i></div>
      </div>
      <div class="rule-wrap">
        <p class="sec-title">规则说明</p>
        <ul class="list-wrap">
          <li class="item-wrap" v-for="item in details.pre_rule">
            <i class="iconfont icon-diamond"></i>
            <span class="rule-item">{{item}}</span>
          </li>
        </ul>
      </div>
      <button v-if="finished"class="common-btn clear-btn dark-bg" disabled><p class="bg-font">认筹结束</p></button>
      <button v-else-if="applied"class="common-btn clear-btn dark-bg" disabled><p class="bg-font">已报名</p></button>
      <button v-else class="common-btn clear-btn bg-font" @click="showPop">
        点击报名 <span class="btn-txt">(剩{{details.pre_size - details.pre_book_count}}名额)</span>
      </button>
    </div>
    <div class="pop-mask" v-show="popShow">
      <div class="form-wrap">
        <i class="iconfont icon-close" @click="hidePop"></i>
        <p class="form-title">个人信息填写</p>
        <form class="info-form" @submit.prevent="onSubmit">
          <div class="info-item">
            <label for="name">姓名*</label>
            <input class="clear-input flex-item" type="text" id="name" placeholder="请填写您的姓名" v-model="formText.name" required>
          </div>
          <div class="info-item flex-btn">
            <label for="phone">电话*</label>
            <input class="clear-input flex-item" type="number" id="phone" placeholder="请填写您的电话号码" v-model="formText.phone" required>
            <button class="code-btn clear-btn" type="button" :disabled="verifing" v-on:click="getCode">{{verifing ? second+'s后重新获取':'获取验证码'}}</button>
          </div>
          <div class="info-item">
            <label for="code">验证码*</label>
            <input class="clear-input flex-item" type="text" id="code" placeholder="请输入验证码" v-model="formText.verify_code" required>
          </div>
          <div class="info-item">
            <label for="ptNum">顾问</label>
            <select class="clear-select flex-item" type="text" id="ptNum" v-model="formText.mc_id">
              <option disabled value="0">以便获得更好服务</option>
              <option v-for="(item, index) in details.consultant" :key="index" :value="item.id">{{item.name}}</option>
            </select>
          </div>
          <p class="right-txt">*为必填项</p>
          <button class="common-btn clear-btn bg-font" type="submit">
            &yen; {{details.book_price}} 去支付
          </button>
        </form>
      </div>
    </div>
    <div class="pop-mask vel-flex" v-show="successPop">
      <div class="pop-bg">
        <i class="iconfont icon-success"></i>
        <p class="pop-title">报名成功</p>
        <p class="pop-content">感谢您的认筹，稍后会有专业的会籍顾问联系您，或是拨打门店电话取得联系</p>
        <button class="clear-btn confirm-btn" @click="hideSucsPop">知道了</button>
      </div>
    </div>
  </div>
</template>
<script>
import { get, post } from '../../common/request'
import { Toast } from 'mint-ui'
export default {
  data () {
    return {
      formText: {
        mc_id: '0'
      },
      verifing: false,
      second: 60,
      popShow: false,
      expand: false,
      successPop: false,
      finished: false,
      applied: false,
      details: {
        consultant: []
      }
    }
  },
  methods: {
    expandInfo () {
      this.expand = !this.expand
    },
    showPop () {
      this.popShow = true
    },
    hidePop: function (e) {
      this.popShow = false
    },
    hideSucsPop: function (e) {
      this.successPop = false
    },
    onSubmit: function () {
      let formData = this.formText
      post(`/api/hydra/book`, formData)
      .then((response) => {
        if (response) {
          window.location.href = response.data
          this.applied = true
          this.popShow = false
          this.successPop = true
        }
      })
    },
    getCode () {
      if (!this.formText.phone) {
        Toast('手机号不能为空')
        return
      }
      this.verifing = true
      this.countdown()
    },
    countdown () {
      if (this.second === 0) {
        this.second = 60
        this.verifing = false
      } else {
        this.timer = setTimeout(() => {
          this.second--
          this.countdown()
        }, 1000)
      }
    }
  },
  created () {
    this.formText.club_id = this.$route.params.id
    get(`/api/hydra/book/${this.$route.params.id}?include=employee`)
    .then(response => {
      this.details = response.data
      this.details.consultant = response.data.employee.data
    })
  }
}
</script>
<style lang="stylus" scoped>
@import "../../common/styles/recg-com.styl";
.detail-swipe-item{
  background-size cover
}
.scroll-page{
  height 100%
  overflow scroll
}
.swipe-wrap{
  width 100%
  position relative
  .bottom-tag{
    position absolute
    background $rcg_themeColor
    bottom 0
    border-radius 0.625rem 0 0 0
  }
}
.content-wrap{
  position relative
  width 100%
  box-sizing border-box
  padding 1.25rem 0.9375rem
  display flex
  flex-direction column
  .club-info{
    width 100%
    .title-txt{
      font-size 1rem
      font-weight bold
      margin-bottom 1.25rem
    }
    .sm-txt{
      font-size 0.75rem
    }
    .pad-txt{
      margin-bottom 0.46875rem
    }
    .light-txt{
      color $rcg_lightFont
      font-size 0.75rem
      line-height 1.3
    }
    .arrow-wrap{
      width 100%
      padding 1.25rem 0 0.625rem 0
      box-sizing border-box
      .icon-arrow{
        font-size 0.875rem
        color $rcg_lightFont
      }
    }
  }
  .sec-title{
    font-size 0.875rem
    font-weight bold
    margin 1.25rem 0 0.625rem 0
  }
  .rule-wrap{
    width 100%
    border-top 1px solid $rcg_lightFont
    padding-bottom 3.5rem
    .list-wrap{
      .item-wrap{
        display flex
        align-items center
        margin-bottom 0.3125rem
        line-height 1.4
        .icon-diamond{
          color #e55927
          font-size 0.625rem
          align-self flex-start
        }
        .rule-item{
          font-size 0.75rem
          padding-left 0.625rem
        }
      }
    }
  }
}
.common-btn{
  position fixed
  bottom 1.25rem
  width 21.5625rem
  height 3.0625rem
  line-height 3.0625rem
  background-color $rcg_themeColor
  border-radius 0.3125rem
  color #fff
  text-align center
  box-shadow 0.21875rem 0.21875rem 0.46875rem rgba(72,76,87,0.5)
  left 50%
  margin-left -10.78125rem
  .btn-txt{
    font-size 0.875rem
  }
}
.dark-bg{
  background-color $rcg_darkBg
}
.pop-mask{
  position fixed
  z-index 100
  top 0
  left 0
  width 100vw
  height 100vh
  overflow auto
  background rgba(0,0,0,0.3)
  opacity 1
  .form-wrap{
    position fixed
    z-index 110
    width 100%
    background-color #fff
    bottom 0
    .icon-close{
      position absolute
      z-index 999
      top 0.9375rem
      right 0.9375rem
      color $rcg_lightFont
      font-size 1.1875rem
    }
    .form-title{
      text-align center
      margin-top 1.25rem
      font-size 0.875rem
    }
    .info-form{
      position relative
      width 100%
      box-sizing border-box
      padding 3.125rem 1.875rem 6.875rem 1.875rem
      display flex
      flex-direction column
      .info-item{
        position relative
        display flex
        height h = 50px
        line-height h
        border-bottom 1px solid #a8abad
        box-sizing border-box
        & > label{
          font-size 0.875rem
          width 3.5rem
        }
        & > input::-webkit-input-placeholder{
          color $rcg_lightFont
          font-size 0.75rem
        }
        .flex-item{
          flex 1
        } 
        .code-btn{
          position absolute
          right 0
          color $rcg_defaultFont
          font-size 0.75rem
          border 1px solid #a8abad
          background none
          padding 4px 8px
          box-sizing border-box
          border-radius 5px
          align-self center
        }
      }
      .flex-btn{
        justify-content space-between
      } 
      .right-txt{
        text-align right 
        color $rcg_themeColor
        line-height 2.5
        font-size 0.75rem
      }
    }
  }
}
.pop-bg{
  width 17.1875rem
  padding 1.25rem 0.9375rem
  box-sizing border-box
  background #fff
  border-radius 0.3125rem
  align-self center
  display flex
  flex-direction column
  align-items center
  .icon-success{
    font-size 4.9375rem
    color $rcg_themeColor
  }
  .pop-title{
    font-size 1.3125rem
    font-weight bold
    text-align center
    margin-top 1.25rem
  }
  .pop-content{
    font-size 0.875rem
    margin-top 1.25rem
    line-height 1.3
  }
  .confirm-btn{
    width 11.5625rem
    height 2.1875rem
    line-height 2.1875rem
    border-radius 0.3125rem
    border 1px solid $rcg_themeColor
    margin-top 1.25rem
    color $rcg_themeColor
    font-size 1rem
    background-color #fff
  }
}
.vel-flex{
  display flex
  flex-direction column
  justify-content center
  align-items center
}
.bg-font{
  font-size 1.125rem
}
</style>


